<template>
  <nav-bar>
    <template v-slot:default>我的收藏（{{total}}件）</template>
  </nav-bar>

  <van-pull-refresh v-if="total > 0" v-model="refreshing" @refresh="onRefresh" style="margin-top:45px;margin-bottom:50px">
    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <van-card v-for="item in list" :key="item.id"
                tag="特价"
                :desc="item.goods.description"
                :title="item.goods.title"
                :thumb="item.goods.cover_url" lazy-load
                @click="goTo(item.goods.id)"
                style="text-align: left"
      >
        <template #tags>
          <div class="price"><small>￥</small>{{ item.goods.price }}.00</div>
        </template>
        <template #price>
          <div class="date">收藏日期：{{ item.created_at.substr(0, 10) }}</div>
        </template>
        <template #num>
          <div class="num">
            <van-button size="mini" @click.stop="collectClick(item.goods.id)">取消收藏</van-button>
          </div>
        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <van-empty v-if="total === 0" description="还没有收藏的商品">
    <van-button round type="danger" class="bottom-button" @click="$router.push({name: 'Category'})">去逛逛</van-button>
  </van-empty>

</template>

<script>
import {ref, reactive, toRefs, onMounted, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Toast} from "vant";
import {myCollects, setCollect} from "network/collect";
import NavBar from "components/common/navbar/NavBar";

export default {
  name: "Collect",
  components: {
    NavBar
  },
  setup() {
    const route = useRoute(),
        router = useRouter();

    // 数据模型
    const state = reactive({
      page: 1,
      totalPage: 0,
      total: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    })

    // 上拉加载
    const onLoad = () => {
      if (state.refreshing) {
        state.list = [];
        state.refreshing = false;
      }
      // 数据填充
      state.loading = true
      myCollects(state.page).then(res => {
        state.list.push(...res.data)
        state.totalPage = res.meta.pagination.total_pages
        state.total = res.meta.pagination.total
        state.loading = false
        if (state.page <= state.totalPage) {
          // 分页自增
          state.page++
        } else {
          // 加载完成
          state.finished = true
        }
      })
    }

    // 下拉刷新
    const onRefresh = () => {
      state.page = 1
      state.finished = false
      state.loading = true
      state.refreshing = true
      onLoad()
    }

    // 跳转商品详情页
    const goTo = id => router.push({name: 'Detail', params: {id}})

    // 取消收藏
    const collectClick = id => {
      setCollect(id).then(res => {
        if (res.status === 204) {
          Toast.success('取消收藏成功')
          onRefresh()
        }
      })
    }

    // 挂载完成
    onMounted(() => {
      onLoad()
    })

    // 返回数据
    return {
      ...toRefs(state), onLoad, onRefresh, goTo, collectClick
    }
  }
}
</script>

<style scoped lang="scss">
.price {
  color: #ff6a00;
  font-size: 16px;
  margin-top: 12px;
}

.date {
  margin-top: 5px;
}
</style>